Raycast自作の拡張機能でAWSサービス名のtypoをサクッと確認・修正できるようにしてみた
こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。
私は以前textlintというしくみを使ってAWSのサービス名の誤り・typoに気づける、typoを修正できるルールを作成していました。
以下のような形でVSCodeなどのエディタと組み合わせることでブログ執筆中のtypoを減らすことができます。
しかし、利用するにつれて以下のようなことを思うようになりました。
- ガッツリ記事を書くときはVSCodeひらいて良いけど、今書いている文章をさっとチェックしたい
- もうキーボードショートカットだけでチェックしたい
ということで、最近RaycastというMac向けのランチャーツールにハマっているので、サクッとtypoを修正できるように自作の拡張機能を作ってみました！
先に結論（こんな感じでサクッとチェック・修正できます）
- input欄にチェック・修正したい項目を入力
cmd+enterでformをサブミット- 下に修正後のテキストと、修正内容が表示される
作り方
以下のブログと同じ手順でテンプレートから自作の拡張機能を作成し始めます。
Create Your First Extension - Raycast APIにあるようにRaycastでCreate Extensionコマンドを実行することでテンプレートから拡張機能のテンプレートが作られます。
私の場合テンプレートとしてFormを選択しました。
この時点で以下のようにファイル群が作成されます。
. ├── CHANGELOG.md ├── README.md ├── assets │ └── command-icon.png ├── package-lock.json ├── package.json ├── src │ └── index.tsx └── tsconfig.json
今回はシンプルな作りですので、src/index.tsxを直接変更して、他にファイルなどは作成しません。
まずpackage.jsonに利用するtextlintのルールなどについて依存性を追記して、npm installを済ませておきます。
"devDependencies": {
"@raycast/eslint-config": "1.0.5",
// 追加
"@textlint/kernel": "^13.3.2",
// 追加
"@textlint/textlint-plugin-markdown": "^13.3.2",
"@types/node": "18.8.3",
"@types/react": "18.0.9",
"eslint": "^7.32.0",
"prettier": "^2.5.1",
// 追加
"textlint": "^13.3.2",
// 追加
"textlint-rule-aws-service-name": "^1.3.2",
"typescript": "^4.4.3"
},
後はindex.tsxを以下のように記載するだけです。
import { useState } from "react";
import { Form, ActionPanel, Action, showToast, Toast } from "@raycast/api";
import { TextlintKernel, TextlintKernelOptions } from "@textlint/kernel";
import * as pluginMarkdown from "@textlint/textlint-plugin-markdown";
import * as awsRule from "textlint-rule-aws-service-name";
type Values = {
input: string;
};
export default function Command() {
const [lintResult, setLintResult] = useState<string>("");
const [fixed, setFixed] = useState<string>("");
async function runTextLint(values: Values) {
const kernel = new TextlintKernel();
const options = getOptions();
// textlintの実行
const result = await kernel.lintText(values.input, options);
const messages = result.messages.map((message) => {
return `${message.message}`;
});
if (messages.length === 0) {
showToast(Toast.Style.Success, "Check Result", "Input text is valid");
}
const lintResult = messages.join("\n");
// チェックの結果を表示
setLintResult(lintResult);
const fixedResult = await kernel.fixText(values.input, options);
const fixed = fixedResult.output;
// 修正後の文章を表示
setFixed(fixed);
}
return (
<Form
actions={
<ActionPanel>
<Action.SubmitForm onSubmit={runTextLint} />
</ActionPanel>
}
>
// 入力用のテキストエリア
<Form.TextArea id="input" title="Input" placeholder="Please enter the text you wish to check" />
<Form.Separator />
// 結果出力用のテキストエリア
<Form.TextArea id="fixed" title="Fixed Result" value={fixed} />
<Form.TextArea id="lintResult" title="Check Result" value={lintResult} />
</Form>
);
}
function getOptions(): TextlintKernelOptions {
const options: TextlintKernelOptions = {
ext: ".md",
plugins: [
{
pluginId: "markdown",
plugin: pluginMarkdown.default,
},
],
rules: [
{
ruleId: "aws-service-name",
rule: awsRule.default,
},
],
};
return options;
}
npm run devを実行することにより以下のようなフォームが表示されますので、Inputのテキストエリアにチェックしたい文章を入力します。
後はcmd+enterを押すことにより結果が出力されます。
これでFixed Resultの欄に表示されている結果をコピペするだけで、AWSサービス名のtypoを予防できます。（2023年4月28日現在、すべてのサービスに対応している訳ではありません）
さいごに
今回自分向けにRaycastの拡張機能を作成してみました！
とても簡単に作成できたので、創作意欲が湧いてきますね！
今回はあくまで「自作の拡張機能」としてパブリックに公開できていません！
Raycast Storeにてみなさんがワンクリックで利用できるようにするには、raycast/extensionsでPull Requestを作成してマージされる必要があります。
現在Pull Requestまで作成していますが、もし公開まで至ったら（至らないでも）、公開までの方法を別途記事にしたいと思います。
以上福岡オフィス所属の今泉でした。
最後まで読んでいただきありがとうございます。
